<template>
	<view>
		<view class="beforeSpeBox" v-if="actionPage=='wait'">
			<view class="beforeSpe"></view>
			<br>
			请刷卡....
			<view class="errorBox" @click="cardWarnSpe">
				卡片异常巡检
			</view>
		</view>
		<view class="detailForm" v-if="actionPage=='sub'">
			<view class="detailItem" v-if="speStatus=='normal'">
				<view class="detailLabel">
					卡号：
				</view>
				<!-- <input :disabled="cardWarn"  type="text" v-model="cardId" class="detailInput" placeholder="请输入卡ID"/> -->
				<input :disabled="true"  type="text" v-model="cardName" class="detailInput" placeholder="请输入卡号"/>
			</view>
			<view class="detailItem">
				<view class="detailLabel">
					点位：
				</view>
				<picker :disabled="speStatus == 'normal'" mode="selector" class="detailInput" v-model="pointIndex" :range="pointList.map(item=>item.label)" @change="changePointer">
					<view class="picker">
						{{(Number(pointIndex)>-1)
							?pointList.map(item=>item.label)[pointIndex] || '请选择'
							:'未选择'
						}}
					</view>
				</picker>
				<!-- <input :disabled="cardWarn" type="text" value="" class="detailInput" placeholder="请选择点位"/> -->
			</view>
			<view class="detailItem">
				<view class="detailLabel">
					状态：
				</view>
				<input disabled="disabled" type="text" v-model="status" class="detailInput" @click="selectStatus()" placeholder="请选择点位状态"/>
				<view class="selectBox animation-slide-bottom" :style="[{animationDelay: '0.1s'}]" v-if="selectStatusFlag">
					<view class="selectItem" @click="changeStatus('1')">正常</view>
					<view class="selectItem" @click="changeStatus('2')">异常</view>
				</view>
			</view>
			<view class="detailItem" style="border-bottom: none;">
				<view class="detailLabel">
					备注：
				</view>
				<textarea v-model="remark" type="text" value="" class="detailInput"></textarea>
			</view>
			<view class="btns">
				<view class="blueBtn" @click="subData()">提交</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'respectIng',
		props:{
			directObj: String,
			itemId: String,
			lineId: String,
			pointId: String,
			
			// value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
			// 	type: [String, Number],
			// 	default(){
			// 		return 0
			// 	}
			// },
			// fixed: Boolean // 是否悬浮,默认false
		},
		data() {
			return {
				lineId:this.$props.lineId,
				pointId:this.$props.pointId,
				itemId:this.$props.itemId,
				taskId:this.$props.taskId,
				NFCAdapter:null,
				cardId:'',//卡ID 165516514561651sad6R515
				cardNo:'',//卡号 4d45e29a
				cardName:'',//卡名称 YP0001X
				actionPage:'wait',// wait sub
				selected:'2',
				remark:'',
				selectStatusFlag:false,
				status:'',
				cardWarn:true,//是否允许编辑
				pointList:[],//点位列表，异常时候可以手动选择
				pointName:'',
				pointIndex:-1,
				speStatus:'normal'//normal:卡片状态正常  error:卡片状态异常
			}
		},
		async mounted() {
			this.closeNfc();
			// 获取点位列表
			await this.getPoints();
			// 开始识别卡片
			if(!this.NFCAdapter){
				console.log('没有初始化就进来')
				this.actionCheck();
			}
			
			// 暂时默认写死,之后在读取卡ID之后触发
			// this.getCardInfo();
		},
		onLoad:function(option){
			
			if(option){
				console.log('路径参数：',option)
				this.lineId = option.lineId;
				this.pointId = option.pointId;
				this.itemId = option.itemId;
				this.taskId = option.taskId;
			}else{
				console.log('没有路径参数')
			}
			
		},
		methods: {
			cardWarnSpe(){
				this.actionPage = 'sub';
				this.speStatus = 'error'
			},
			closeNfc(){
				if(this.NFCAdapter){
					console.log('开始清除')
					this.NFCAdapter.offDiscovered(this.discoverHandler)
					this.NFCAdapter.stopDiscovery()
					this.NFCAdapter = null
					console.log('清除结束')
				}
			},
			async getPoints(){
				let _this = this;
				await this.$http.get('/inspect/insPoint/list?pageNo=1&pageSize=9999')
					.then(res=>{
						if(res.data.success){
						 _this.pointList = res.data.result.records.map(item=>{
							 return {
								 value:item.id,
								 label:item.pointName
							 }
						 })
						}
					})
			},
			changePointer(val){
				this.pointIndex = val.detail.value
				this.pointId = this.pointList[val.detail.value].value
			},
			changeStatus(val){
				let obj=['','正常','异常']
				this.status = obj[val];
				this.selectStatusFlag = false;
			},
			getCardInfo(id){
				let _this = this;
				this.$http.get('/inspect/insPoint/queryByCardNo',{
					params:{cardNo:id || this.cardNo }
				}).then(res=>{
					if(res.data.success){
						_this.cardId = res.data.result.cardId;
						_this.cardName = res.data.result.cardName || res.data.result.cardNo || '异常';
						let zindex=-1;
						_this.pointList.forEach((ii,index)=>{
							if(ii.label == res.data.result.pointName){
								zindex = index
							}
						})
						_this.pointIndex = zindex
						_this.pointId = _this.pointList[zindex].value
						console.log('回填：',_this.pointIndex)
					}else{
						_this.$tip.toast(res.data.message);
						_this.actionPage = 'wait'
					}
					
					console.log('卡的详细信息3',res)
				})
			},
			selectStatus(){
				this.selectStatusFlag = !this.selectStatusFlag;
			},
			subData(){
			
				let statusObj = {
					lineId : this.lineId,
					pointId : this.pointId,
					itemId : this.itemId,
					taskId : this.taskId,
					insStatus:this.status=="正常"?'1':'2',
					remark:this.remark
				};
				if(this.speStatus == 'normal'){
					statusObj.cardId=this.cardId
				}
				let _this = this;
				console.log(statusObj)
				if( !statusObj.pointId){
					return this.$tip.toast('请选择点位')
				}
				if(!statusObj.insStatus){
					return this.$tip.toast('请选择状态')
				}
				
				this.$http.post('/inspect/insTaskRecord/add',statusObj).then(res=>{
					if(res.data.success){
						_this.$tip.toast('提交成功！');
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/index/index'
							});
						},2000)
						
					}else{
						_this.$tip.toast(res.data.message || '提交异常');
					}
					
				})
			},
			change(val){
				console.log(val)
			},
			actionCheck(){
				this.$tip.alert("请将设备放入识别区NFC")
				console.log(this.NFCAdapter);
				try{
					this.closeNfc();
				}catch(e){
					//TODO handle the exception
				}
				this.NFCAdapter = wx.getNFCAdapter();
				this.NFClistener();
			},
			NFClistener(){
				let _this = this;
				this.NFCAdapter.startDiscovery({
				  success: () => {
				    _this.$tip.alert("请将设备放入识别区NFC")
				    // 监听 NFC 标签
				    _this.NFCAdapter.onDiscovered(this.discoverHandler)
				  },
				  fail: error => {
					  console.log('error',error)
					  if(error.errMsg=='startDiscovery:fail:NFC discovery already started'){
						  _this.NFCAdapter.onDiscovered(this.discoverHandler)
					  }
						// _this.$tip.alert("请重试")
				    console.error(error)
				  }
				})
			},
			/**
			 * 监听回调
			 */
			discoverHandler(callback) {
				let _this = this;
			  console.log('==================== START ====================')
			  console.log('onDiscovered callback=>', callback)
			  let arr = [0x01, 0x01, 0x01, 0x01];
				let writeBuffer = new Uint8Array(arr);
				 let cId = this.changeType(callback.id)
				_this.cardNo = cId || ''
				// setTimeout(function(){
					_this.actionPage = 'sub'
				// },100)
				
				// 通过id获取对应的卡片信息以及卡片绑定的点位信息
				_this.getCardInfo(cId);
			},
			changeType(buffer){
			 return Array.prototype.map.call(new Uint8Array(buffer),x => ('00'+x.toString(16)).slice(-2)).join('')
			},
		}
	}
</script>

<style scoped>
	.beforeSpeBox{
		width: 100vw;
		height: 90vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}
	.errorBox{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 12px;
		font-size: 14px;
		color: rgba(102, 102, 102, 1);
	}
	.beforeSpe{
		height: 20px;
		background-color: #0081FF;
		border-radius: 6px;
		animation:fullWidth 3s linear infinite;
		margin-bottom: 12px;
	}
	@keyframes fullWidth{
		from{
			width:0px
		}
		to{
			width: 200px;
		}
	}
	.detailForm{
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0px 0px 5px rgba(0,0,0,.1);
		padding: 20px;
		font-size: 15px;
		line-height: 38px;
	}
	.btns{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		margin-top: 30px;
	}
	.blueBtn{
		padding: 0 22px;
		border-radius: 4px;
		line-height: 30px;
		display: inline-block;
		color: #fff;
		font-size: 16px;
		background-color: #0081FF;
	}
	.selectBox{
		width: 160px;
		max-height: 150px;
		overflow: auto;
		border-radius: 4px;
		box-shadow: 0 0 5px rgba(0,0,0,.1);
		background: #fff;
		position: absolute;
		z-index: 222;
		top: 43px;
		left: 60px;
	}
	.selectItem{
		border-bottom: 1px solid rgba(0,0,0,.02);
		line-height: 30px;
		padding-left: 12px;
	}
	.detailLabel{
		width: 60px;
		color: #000000;
	}
	.detailInput{
		width: calc(100% - 60px);
		height: 38px;
		color: #555;
		font-size: 14px;
	}
	textarea.detailInput{
		height: 80px;
		line-height: 20px;
		border: 1px solid rgba(0,0,0,.1);
		border-radius: 2px;
		margin-top: 6px;
		padding: 6px;
	}
	.detailItem{
		border-bottom: 1px solid rgba(0,0,0,.04);
		display: flex;
		position: relative;
	}
	.waitCheck,.box{
		width:100%;
		height: 100%;
	}
	.waitCheck{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.warnTbn{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 12px;
		font-size: 12px;
		color: #666;
	}
	.utton{
		background-color: #0081FF;
		border-radius: 3px;
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
		color: white;
		font-size: 16px;
	}
</style>
